import React, { useState } from 'react';
import { Layout, Tabs, List, Input, DatePicker, Space, Tag, Typography, Modal } from 'antd';
import type { TabsProps } from 'antd';
import { Link } from 'react-router-dom';
import MainLayout from '../../../components/MainLayout';
import styles from './index.module.css';

const { Search } = Input;
const { RangePicker } = DatePicker;
const { Text, Paragraph } = Typography;

// 模拟重要内容数据
const mockImportantContent = [
  {
    id: 1,
    title: '2024年产业发展重点任务发布',
    time: '2024-03-15',
    summary: '省政府发布2024年产业发展重点任务清单，明确了各产业链发展目标和关键举措...',
    source: '省政府官网',
    importance: '高'
  },
  {
    id: 2,
    title: '重大项目投资计划公布',
    time: '2024-03-14',
    summary: '我省公布2024年重大项目投资计划，涉及新能源、高端装备制造等多个领域...',
    source: '发改委',
    importance: '高'
  },
];

const timeFilterItems: TabsProps['items'] = [
  {
    key: 'week',
    label: '一周内',
  },
  {
    key: 'month',
    label: '一个月内',
  },
  {
    key: 'halfYear',
    label: '半年内',
  },
  {
    key: 'year',
    label: '一年内',
  },
  {
    key: 'all',
    label: '全部时间',
  },
  {
    key: 'custom',
    label: '自定义时间',
  },
];

const Important = () => {
  const [activeTimeFilter, setActiveTimeFilter] = useState('week');
  const [searchText, setSearchText] = useState('');
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);

  const handleTimeFilterChange = (key: string) => {
    if (key === 'custom') {
      setIsDatePickerVisible(true);
    } else {
      setActiveTimeFilter(key);
    }
  };

  const handleSearch = (value: string) => {
    setSearchText(value);
    // 实现搜索逻辑
  };

  const handleDateRangeOk = (dates: any) => {
    setIsDatePickerVisible(false);
    setActiveTimeFilter('custom');
    // 处理日期范围逻辑
  };

  const getImportanceTag = (importance: string) => {
    const colorMap = {
      '高': '#f50',
      '中': '#108ee9',
      '低': '#87d068'
    };
    
    return (
      <Tag color={colorMap[importance as keyof typeof colorMap]}>
        重要程度：{importance}
      </Tag>
    );
  };

  return (
    <MainLayout>
      <Layout className={styles.container}>
        <div className={styles.content}>
          <div className={styles.filterSection}>
            <div className={styles.filterRow}>
              <div className={styles.tabsWrapper}>
                <Tabs
                  activeKey={activeTimeFilter}
                  items={timeFilterItems}
                  onChange={handleTimeFilterChange}
                  className={styles.tabs}
                />
              </div>
              <div className={styles.searchWrapper}>
                <Search
                  placeholder="搜索重要内容"
                  onSearch={handleSearch}
                  style={{ width: 300 }}
                  allowClear
                />
              </div>
            </div>
          </div>

          <List
            className={styles.importantList}
            itemLayout="vertical"
            size="large"
            pagination={{
              onChange: (page) => {
                console.log(page);
              },
              pageSize: 10,
            }}
            dataSource={mockImportantContent}
            renderItem={(item) => (
              <List.Item
                key={item.id}
                className={styles.contentItem}
                extra={
                  <div className={styles.contentExtra}>
                    <Text type="secondary">{item.time}</Text>
                    {getImportanceTag(item.importance)}
                    <Tag color="blue">{item.source}</Tag>
                  </div>
                }
              >
                <List.Item.Meta
                  title={
                    <Link to={`/knowledge/news/${item.id}`} className={styles.contentTitle}>
                      {item.title}
                    </Link>
                  }
                  description={
                    <Paragraph 
                      ellipsis={{ rows: 2 }}
                      className={styles.contentSummary}
                    >
                      {item.summary}
                    </Paragraph>
                  }
                />
              </List.Item>
            )}
          />
        </div>

        <Modal
          title="选择时间范围"
          open={isDatePickerVisible}
          onCancel={() => setIsDatePickerVisible(false)}
          footer={null}
        >
          <div className={styles.datePickerModal}>
            <RangePicker
              onChange={handleDateRangeOk}
              className={styles.rangePicker}
            />
          </div>
        </Modal>
      </Layout>
    </MainLayout>
  );
};

export default Important;